<template>
  <el-dialog
    title="添加热门话题"
    :visible="modalVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    class="topic-modal"
  >
    <el-select
      v-model="selected_category"
      placeholder="请选择话题分类"
      @change="changeCategory"
    >
      <el-option
        v-for="option in topicCategoryOptions"
        :label="option.name"
        :value="option.category_id"
        :key="option.category_id"
      ></el-option>
    </el-select>
    <div class="tag-list-container">
      <div class="tag-list">
        <div
          class="list-item"
          :class="{
            checked: checkedTopics.indexOf(element.topic_id) > -1,
            disabled: element.disabled,
          }"
          v-for="element in selected_topics"
          :key="element.topic_id"
          :style="{ backgroundImage: 'url(' + imgHost + element.picture + ')' }"
          @click="onChekedTopic(element)"
        >
          <span class="tag-name">{{ element.title }}</span>
          <i class="el-icon-check"></i>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit('ruleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  props: ["visible", "addedTopics"],
  name: "AddCategoryModal",
  data() {
    return {
      checkedTopics: [],
      selected_category: "",
      selected_topics: [],
    };
  },
  computed: {
    modalVisible() {
      return this.visible;
    },
    ...mapState({
      topicCategories: (store) => store.topicMangeStore.topicCategories,
    }),
    ...mapGetters(["topicCategoryOptions"]),
  },
  watch: {
    visible(value) {
      if (value == true) {
        this.checkedTopics = [];
        this.selected_category = this.topicCategories[0]["category"][
          "category_id"
        ];
        this.selected_topics = this.topicCategories[0]["topics"];
        this.$nextTick(() => {
          this.disabledTopics();
          this.$forceUpdate();
        });
      }
    },
  },
  methods: {
    onChekedTopic(topic) {
      if (topic.disabled) return;
      var indexOf = this.checkedTopics.indexOf(topic.topic_id);
      if (indexOf > -1) {
        this.checkedTopics.splice(indexOf, 1);
      } else {
        this.checkedTopics.push(topic.topic_id);
      }
    },
    handleClose() {
      this.$emit("handleClose");
    },
    changeCategory(value) {
      this.topicCategories.forEach((item) => {
        if (item.category.category_id == value) {
          this.selected_topics = item.topics;
        }
      });
      this.$nextTick(() => {
        this.disabledTopics();
        this.$forceUpdate();
      });
    },
    disabledTopics() {
      this.selected_topics.forEach((select) => {
        let flag = false;
        this.addedTopics.forEach((added) => {
          if (added.topic_id === select.topic_id) {
            flag = true;
          }
        });
        if (flag) {
          select.disabled = true;
        }else{
          select.disabled = false;
        }
      });
    },
    handleSubmit() {
      let params = [];
      this.checkedTopics.forEach((item) => {
        params.push({
          topic_id: item,
        });
      });
      if (!this.checkedTopics.length) {
        this.$message("请选择要添加的话题");
        return;
      }
      this.$post("trend/hot_topic", params).then((resp) => {
        if (resp.message == "OK") {
          this.$emit("handleClose");
          this.$emit("reloadHotTopic");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-list-container {
  border: none;
  box-shadow: none;
  margin: 15px 0;
  .tag-list .list-item {
    cursor: pointer;
    .el-icon-check {
      display: none;
      position: absolute;
      top: -8px;
      right: -8px;
      padding: 2px;
      background: #ccc;
      border-radius: 50%;
    }
    &.disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
  }
  .tag-list .list-item.checked {
    border: 2px solid rgb(50, 65, 87);
    .el-icon-check {
      display: block;
    }
  }
}
</style>

